<template >
    <div class="login">
        <div class="box">
            <div class="img">
                <img src="../assets/1.jpg" alt="">
            </div>
            <el-form :model="form" :rules="rules" ref="form" label-width="80px">
                <el-form-item label="用户名" prop="user">
                    <el-input v-model="form.user" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="form.pwd" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
            </el-form>
           
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="reset">重置</el-button>
       
        </div>
    </div>
</template>
<script>


export default {
    data() {
        return {
            form: {
                user: 'admin',
                pwd: '123456',
            },
            rules: {
                user: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
                pwd: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        login() {
            this.$refs.form.validate(async (valid) => {
                if (!valid) {
                    return this.$message.error('校验失败,爬')
                } else {
                    var res = await this.axios({
                        url: '/v1/login',
                        method: "POST",
                        data: {
                            username: this.form.user,
                            password: this.form.pwd,
                        }
                    })
                    console.log(res);
                    if (res.data.meta.status == 200) {
                        localStorage.setItem('token', res.data.data.token)
                        this.$message.success('登录成功')
                        this.$router.push('/menu')
                    }
                }
            })
        },
        reset() {
            this.form = {}
        }
    }
}
</script>
<style scoped>
.login {
    width: 100%;
    height: 100%;
    background-color: #2b4b6b;
    position: relative;
}

.box {
    width: 500px;
    height: 350px;
    background-color: #ffffff;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;
    padding-top: 120px;
    padding-left: 50px;
    padding-right: 50px;
    position: relative;
   
}

.img {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    position: absolute;
    top: -70px;
    left: 180px;
    border-radius: 50%;
    padding: 3px;
    box-shadow: 5px 5px 5px  #000;
}

.img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
</style>